<template>
	<view class="container-bottom-btns">
		<view class="form">
			<view class="form-column-item">
				<view class="label">联系人姓名</view>
				<view class="content">
					<input v-model="form.contactName" placeholder-class="placeholder-input" type="text" placeholder="请输入联系人姓名" />
				</view>
			</view>
			<view class="form-column-item">
				<view class="label">企业名称</view>
				<view class="content">
					<input v-model="form.firmName" placeholder-class="placeholder-input" type="text" placeholder="请输入企业名称" />
				</view>
			</view>
			<view class="form-column-item">
				<view class="label">企业类型</view>
				<view class="picker-content" @tap="$refs.firmType.open()">
					<view :class="{'placeholder-picker': !firmTypeText, 'picker-text': firmTypeText}">
						{{firmTypeText ? firmTypeText: '请选择企业类型'}}
					</view>
					<u-icon name="arrow-down"></u-icon>
				</view>
			</view>
			<view class="form-column-item" style="padding-bottom: 0;">
				<view class="label">营业执照</view>
				<view class="content">
					<UploadImages v-model="imageList"></UploadImages>
				</view>
			</view>

			<view class="agreement flex-xy-center">
				<label @tap="isAgree = !isAgree" class="flex-y-center">
					<radio :checked="isAgree" color="#FE5A13" style="transform: scale(.6);"></radio>
					<text>我已阅读并同意</text>
					<text class="agree-text" @tap.stop="$myUni.navTo('/pages/other/richText?from=REGISTRATION_AGREEMENT')">《注册协议》</text>
				</label>
			</view>
		</view>
		
		<view class="bottom-btn-wrapper">
			<SubmitBtn text="提交" @tap="submit"></SubmitBtn>
		</view>

		<OnePicker ref="firmType" keyName="label" :columns="firmTypeArr" @pickerConfirm="firmTypeConfirm"></OnePicker>
	</view>
</template>

<script>
	import UploadImages from '@/components/UploadImages/UploadImages.vue'
	import { becomeFirm } from '@/api/user.js'
	import {
		firmType,
		const2Arr
	} from '@/consts/index.js'
	import validate from '../../utils/validate';
	import { toast, previewImages, backTo } from '@/utils/uni-api.js'
	export default {
		components: {
			UploadImages
		},
		data() {
			return {
				form:{
					firmName: '',
					firmType: '',
					businessLicense: '',
					contactName: '',
				},
				firmType,
				firmTypeArr: [const2Arr(firmType)],
				imageList: [],
				isAgree: false
			};
		},
		computed: {
			firmTypeText() {
				return this.form.firmType ? this.firmTypeArr[0].find(item => item.value === this.form.firmType).label : ''
			}
		},
		methods: {
			firmTypeConfirm(e) {
				this.form.firmType = e.value.value
			},
			submit() {
				if (!validate.isNotEmpty(this.form.contactName, '联系人姓名')) return 
				if (!validate.isNotEmpty(this.form.firmName, '企业名称')) return 
				if (!validate.isNotEmpty(this.form.firmType, '企业类型')) return 
				if(!this.imageList.length){
					return toast('请上传营业执照')
				}
				if (!this.isAgree) {
					return toast('请阅读并同意《注册协议》');
				}
				this.form.businessLicense = this.imageList.join(',')
				becomeFirm(this.form).then(res => {
					toast(res.message, true)
					setTimeout(() => {
						uni.navigateBack()
					}, 800)
				})
			}
		}
	}
</script>

<style lang="scss">
	.sms-code {
		width: 163rpx;
		height: 52rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		border: 1rpx solid $theme-color;
		font-weight: normal;
		font-size: 25rpx;
		color: $theme-color;
	}

	.disabled {
		border: 1rpx solid #d1d1d1;
		color: #d1d1d1;
	}
	
	.agreement{
		padding: 40rpx 0 30rpx;
		font-size: 26rpx;
		
		.agree-text{
			color: $theme-color;
		}
	}
</style>